<script setup lang="ts">
import { reactive, ref } from 'vue'
import UserInfo from './UserInfo.vue'
import RoleList from './RoleList.vue'
import { GET_USER_LIST, DELETE_USER } from '@/api/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
type ITableData = {
  date: string
  name: string
  address: string
  age: number
}
interface IPageData {
  tableData: ITableData[]
  loading: boolean
  age?: number
  pageSize: number
  pageNum: number
  curUserId: string
  total: number
  showDialog: boolean
  showRoleDialog: boolean
}
interface IQuery {
  name: string
  age: number | undefined
  dateRange: [string, string]
}
interface IRes {
  list: ITableData[]
  total: number
}
const pageData: IPageData = reactive({
  tableData: [],
  loading: true,
  pageSize: 10,
  pageNum: 1,
  total: 0,
  curUserId: '',
  showDialog: false,
  showRoleDialog: false
})
const FormRef = ref()
let queryData: IQuery = reactive({
  name: '',
  age: undefined,
  dateRange: ['', '']
})
const router = useRouter()
const getData = async () => {
  pageData.loading = true
  let params = {
    name: queryData.name,
    age: queryData.age,
    startDate: queryData.dateRange[0],
    endDate: queryData.dateRange[1],
    pageNum: pageData.pageNum,
    pageSize: pageData.pageSize
  }
  console.log(params)
  const res: unknown = await GET_USER_LIST(params)
  pageData.tableData = (res as IRes).list
  pageData.total = (res as IRes).total
  pageData.loading = false
}
getData()
const doSearch = () => {
  getData()
}
const doReset = () => {
  // queryData.name = ''
  // queryData.dateRange = ['', '']
  // queryData.age = null
  // queryData = {
  //   name: '',
  //   dateRange: ['', ''],
  //   age: null
  // }
  FormRef.value.resetFields()
  getData()
}
const addUser = () => {
  pageData.showDialog = true
}
const closeDialog = (flag: boolean) => {
  pageData.showDialog = false
  pageData.showRoleDialog = false
  if (flag) {
    getData()
  }
}
const changePageSize = (val: number) => {
  pageData.pageSize = val
  pageData.pageNum = 1
  getData()
}
const changePageNum = (val: number) => {
  pageData.pageNum = val
  getData()
}
const doDelete = async (id: string) => {
  console.log(id)
  await DELETE_USER(id)
  ElMessage.success('删除成功')
  getData()
}
const selectRole = (id: string) => {
  pageData.showRoleDialog = true
  pageData.curUserId = id
}
const goDetail = (id: string) => {
  router.push({path:`/user-detail`,params:{id}})
}
const editUser = (id: string) => {
  pageData.showDialog = true
  pageData.curUserId = id

}
</script>

<template>
  <el-form ref="FormRef" v-model="queryData" size="small" inline>
    <el-form-item label="姓名">
      <el-input v-model="queryData.name"></el-input>
    </el-form-item>
    <el-form-item label="日期范围">
      <el-date-picker
        v-model="queryData.dateRange"
        value-format="YYYY-MM-DD HH:mm:ss"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束如期"
      />
    </el-form-item>
    <el-form-item label="年龄">
      <el-input-number v-model="queryData.age" size="small" :controls="false" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="doSearch">查询</el-button>
      <el-button type="info" @click="doReset">重置</el-button>
      <el-button type="success" @click="addUser">新增</el-button>
      <el-button type="success" @click="editUser('1')">编辑</el-button>
    </el-form-item>
  </el-form>
  <el-table v-loading="pageData.loading" :data="pageData.tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180">
      <template #default="scope">
        <el-button link type="primary" @click="goDetail(scope.row.id)" size="small">{{ scope.row.name }}</el-button>
      </template>
      </el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-popconfirm title="确认删除此数据吗？" @confirm="doDelete(scope.row.id)">
          <template #reference>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button link type="primary" size="small">Edit</el-button>
        <el-button link type="primary" size="small" @click="selectRole(scope.row.id)">
          角色授权
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    class="table-pagination"
    v-model:current-page="pageData.pageNum"
    v-model:page-size="pageData.pageSize"
    :page-sizes="[10, 20, 50, 100]"
    small
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageData.total"
    @size-change="changePageSize"
    @current-change="changePageNum"
  />
  <UserInfo :id="pageData.curUserId" v-if="pageData.showDialog" @handleClose="closeDialog"></UserInfo>
  <RoleList
    v-if="pageData.showRoleDialog"
    :userId="pageData.curUserId"
    @handleClose="closeDialog"
  ></RoleList>
</template>
